<script setup lang="ts">
const props = defineProps<{
  // 标题内容
  title: string;
  // 高度
  height: String;
  // 宽度
  width: String;
}>()

</script>

<template>
  <div :style="{ width: `${props.width}`, height: `${props.height}` } " class="w-1/3 h-2/5 box-class rounded-lg">
    <div class="h-16 w-full title-calss leading-16 indent-3 font-sans text-lg not-italic font-normal text-black">
      {{ props.title }}
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="stylus">
.box-class {
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 80%, #E3F6F8FF 120%);
}
.title-calss {
  background: linear-gradient(90deg,  #E3F6F8FF 0%, #E3F6F8FF 70%, #ffffff 100%);
  font-size: 18px;
  height: 50px;
  line-height: 50px;
  font-family: DINPro;
}
.card-body {
  height: calc(100% - 50px);
  width: 100%;
}
</style>